<script setup lang="tsx">
import { PropType, reactive } from 'vue'
import type { TableData } from '@/api/table/types'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { PageDataProperty } from '../../../../types/Lowcode'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'

const props = defineProps({
  pageConfig: {
    type: Object as PropType<PageDataProperty>,
    required: true
  },
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  }
})

const crudSchemas = reactive<CrudSchema[]>(props.pageConfig.schemas)

const { allSchemas } = useCrudSchemas(crudSchemas)
const schema = reactive<DescriptionsSchema[]>(allSchemas.detailSchema)
</script>

<template>
  <Descriptions :column="12" :schema="schema" :data="currentRow || {}" />
</template>
